<template>
  <view class="content">
    <view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
      <canvas
        id="cropper"
        class="cropper"
        :disable-scroll="true"
        :style="{ width: cropperOpt.width, height: cropperOpt.height*ratio, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
        canvas-id="cropper"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      />
      <canvas
        id="targetId"
        class="cropper"
        :disable-scroll="true"
        :style="{
          position: 'fixed',
          top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
          left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
          width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
          height: `${cropperOpt.height*ratio * cropperOpt.pixelRatio}`
        }"
        canvas-id="targetId"
      />
    </view>
    <cover-view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
      <!-- #ifdef H5 -->
      <cover-view class="upload" @tap="uploadTap">
        选择图片
      </cover-view>
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <cover-view class="upload" @tap="uploadTap">
        重新选择
      </cover-view>
      <!-- #endif -->
      <cover-view class="getCropperImage" @tap="getCropperImage(false)">
        确定
      </cover-view>
    </cover-view>
  </view>
</template>

<script>
import WeCropper from './weCropper.js'
export default {
  props: {
    // 裁剪矩形框的样式，其中可包含的属性为lineWidth-边框宽度(单位rpx)，color: 边框颜色，
    // mask-遮罩颜色，一般设置为一个rgba的透明度，如"rgba(0, 0, 0, 0.35)"
    boundStyle: {
      type: Object,
      default() {
        return {
          lineWidth: 4,
          borderColor: 'rgb(245, 245, 245)',
          mask: 'rgba(0, 0, 0, 0.35)'
        }
      }
    }
    // // 裁剪框宽度，单位rpx
    // rectWidth: {
    // 	type: [String, Number],
    // 	default: 400
    // },
    // // 裁剪框高度，单位rpx
    // rectHeight: {
    // 	type: [String, Number],
    // 	default: 400
    // },
    // // 输出图片宽度，单位rpx
    // destWidth: {
    // 	type: [String, Number],
    // 	default: 400
    // },
    // // 输出图片高度，单位rpx
    // destHeight: {
    // 	type: [String, Number],
    // 	default: 400
    // },
    // // 输出的图片类型，如果发现裁剪的图片很大，可能是因为设置为了"png"，改成"jpg"即可
    // fileType: {
    // 	type: String,
    // 	default: 'jpg',
    // },
    // // 生成的图片质量
    // // H5上无效，目前不考虑使用此参数
    // quality: {
    // 	type: [Number, String],
    // 	default: 1
    // }
  },
  data() {
    return {
      // 底部导航的高度
      bottomNavHeight: 50,
      originWidth: 200,
      width: 0,
      height: 0,
      ratio: 1, // 长宽比
      cropperOpt: {
        id: 'cropper',
        targetId: 'targetCropper',
        pixelRatio: 1,
        width: 0,
        height: 0,
        scale: 2.5,
        zoom: 8,
        cut: {
          x: (this.width - this.originWidth) / 2,
          y: (this.height - this.originWidth) / 2,
          width: this.originWidth,
          height: this.originWidth
        },
        boundStyle: {
          lineWidth: uni.upx2px(this.boundStyle.lineWidth),
          mask: this.boundStyle.mask,
          color: this.boundStyle.borderColor
        }
      },
      // 裁剪框和输出图片的尺寸，高度默认等于宽度
      // 输出图片宽度，单位px
      destWidth: 200,
      // 裁剪框宽度，单位px
      rectWidth: 200,
      // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
      fileType: 'jpg',
      src: '' // 选择的图片路径，用于在点击确定时，判断是否选择了图片
    }
  },
  onLoad(option) {
    const rectInfo = uni.getSystemInfoSync()
    this.ratio = 1
    if (option.ratio) {
      this.ratio = Number(option.ratio)
    }
    this.width = rectInfo.windowWidth
    this.height = rectInfo.windowHeight - this.bottomNavHeight
    console.log('rectInfo.windowHeight',rectInfo.windowHeight)
    console.log('canvas.windowHeight',this.height)
    this.cropperOpt.width = this.width
    this.cropperOpt.height = this.height
    this.cropperOpt.pixelRatio = rectInfo.pixelRatio
    
    if (option.destWidth) this.destWidth = option.destWidth
    if (option.rectWidth) {
      const rectWidth = Number(option.rectWidth)
      this.cropperOpt.cut = {
        x: (this.width - rectWidth) / 2,
        y: (this.height - rectWidth) / 2,
        width: rectWidth,
        height: rectWidth*this.ratio
      }
    }
    this.rectWidth = option.rectWidth
    if (option.fileType) this.fileType = option.fileType
    // 初始化
    this.cropper = new WeCropper(this.cropperOpt)
      .on('ready', ctx => {
        // wecropper is ready for work!
      })
      .on('beforeImageLoad', ctx => {
        // before picture loaded, i can do something
      })
      .on('imageLoad', ctx => {
        // picture loaded
      })
      .on('beforeDraw', (ctx, instance) => {
        // before canvas draw,i can do something
      })
    // 设置导航栏样式，以免用户在page.json中没有设置为黑色背景
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000'
    })
    uni.chooseImage({
      count: 1, // 默认9
      sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: res => {
        this.src = res.tempFilePaths[0]
        //  获取裁剪图片资源后，给data添加src属性及其值
        this.cropper.pushOrign(this.src)
      }
    })
  },
  methods: {
    touchStart(e) {
      this.cropper.touchStart(e)
    },
    touchMove(e) {
      this.cropper.touchMove(e)
    },
    touchEnd(e) {
      this.cropper.touchEnd(e)
    },
    getCropperImage(isPre = false) {
      if(!this.src) return this.$u.toast('请先选择图片再裁剪')

      const cropper_opt = {
        destHeight: Number(this.destWidth)*this.ratio, // uni.canvasToTempFilePath要求这些参数为数值
        destWidth: Number(this.destWidth),
        fileType: this.fileType
      }
      this.cropper.getCropperImage(cropper_opt, (path, err) => {
        if (err) {
          uni.showModal({
            title: '温馨提示',
            content: err.message
          })
        } else {
          if (isPre) {
            uni.previewImage({
              current: '', // 当前显示图片的 http 链接
              urls: [path] // 需要预览的图片 http 链接列表
            })
          } else {
            uni.$emit('uAvatarCropper', path)
            this.$u.route({
              type: 'back'
            })
          }
        }
      })
    },
    uploadTap() {
      const self = this
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          self.src = res.tempFilePaths[0]
          //  获取裁剪图片资源后，给data添加src属性及其值

          self.cropper.pushOrign(this.src)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../plugins/uview-ui/libs/css/components.scss';

.content {
	background: rgba(255, 255, 255, 1);
}

.cropper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 11;
}

.cropper-buttons {
	background-color: #000000;
	color: #eee;
}

.cropper-wrapper {
	position: relative;
	@include vue-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	background-color: #000;
}

.cropper-buttons {
	width: 100vw;
	@include vue-flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 28rpx;
  z-index: 1229999!important;
}

.cropper-buttons .upload,
.cropper-buttons .getCropperImage {
	// width: 50%;
	text-align: center;
}

.cropper-buttons .upload {
	text-align: left;
	padding-left: 50rpx;
}

.cropper-buttons .getCropperImage {
	text-align: right;
	padding-right: 50rpx;
}
</style>
